<template>
	<view class="main">
		<custom @showTopDailog="showTopDailog" @getContent="getContent" position="index"
			@getPlanListEvent="getPlanListEvent"></custom>
		<!--  -->
		<block v-if="isrefresh">
			<view class="scrollImg_containers" v-if='PlanList&&PlanList.length>0'>
				<view class="scrollImg_item" v-for="(item,index) in PlanList" :key="index"
					v-if="item.actorVoList&&item.actorVoList.length>0">
					<view class="scrollImg_item_title">
						<text class="scrollImg_item_title_text">{{item.dayzn}}</text>
						<text class="scrollImg_item_title_text1" :class="'active'+(index%3)">{{item.weekDayZn}}</text>
						<text class="scrollImg_item_title_text2" >演出艺人介绍</text>
					</view>
					<view class="scrollImg_item_line" :class="'active'+(index%3)"></view>
					<view class="scrollImg_item_view">
						<scrollImg :actorVoList='item.actorVoList' :day='item.day' :indexs='index+1'></scrollImg>
					</view>
				</view>
			</view>
			<!-- goods -->
			<view class="goodsContainers">
				<view class="goodsContainers_top">
					<view class="goodsContainers_top_img">
						周边贩售
					</view>
					<!-- <image src="@/static/goods.png" class="goodsContainers_top_img"></image> -->
					<view class="goodsContainers_top_goodsIcon" @tap="goTomore" style="cursor: pointer;">
						<view class="goodsContainers_top_goodsIcon_text">
							更多
						</view>
						<view class="goodsContainers_top_goodsIcon_img">
							<image src="@/static/rightArrow.png" class="goodsContainers_top_goodsIcon_img_Icon"></image>
						</view>
					</view>
				</view>
				<view class="goodsContainers_bottom" v-if="selectPlanItem">
					<!-- Stargrazer ANIMELO SUMMER LIVE 2024. -->
					{{selectPlanItem.value}}
				</view>
			</view>
			<!-- banner  轮播图 -->
			<view class="bannerContainers">
				<lswiper :height="444" :banner="banner"></lswiper>
			</view>
			<!-- 新闻 -->
			<view class="newsContainers">
				<newsContainers :selectPlanItem="selectPlanItem"></newsContainers>
			</view>
			<!-- PLAYLIST -->
			<!-- <view class="playlistContainers">
			<view class="playlistContainers_title">
				PLAYLIST
			</view>
			<playList></playList>
		</view> -->
		</block>
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import topDailog from '@/components/common/topDailog.vue';
	import lswiper from '@/components/common/l-swiper/l-swiper.vue';
	import footerContainer from '@/components/common/footer.vue';
	import scrollImg from '@/components/index/scrollImg.vue';
	import newsContainers from '@/components/index/newsContainers.vue';
	import playList from '@/components/index/playList.vue';
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			footerContainer,
			scrollImg,
			lswiper,
			newsContainers,
			playList
		},
		data() {
			return {
				isrefresh: false,
				PlanList: [],
				topDailogStatus: false,
				selectPlanItem: {},
				arr: [
				],
				banner: [
					'/static/banner1.jpg',
					'/static/banner1.jpg',
					'/static/banner1.jpg'
				]
			}
		},
		onShow() {

		},
		onLoad(options) {
			let _this = this

		},
		onReady() {


		},
		methods: {
			getPlanListEvent(data) {
				this.PlanList = data
				console.log("99++++++++++++++")
				console.log(data)
			},
			getContent(data) {
				
				let that = this
				this.selectPlanItem = data
				console.log(data)
				console.log("///++++++++++++++")
				this.isrefresh = false
				// 设置一个1000毫秒后执行的定时器
				setTimeout(function() {
					that.isrefresh = true
				}, 1000);

			},
			goTomore() {
				uni.navigateTo({
					url: '/pages/goods/index'
				});
			},

			showTopDailog() {
				this.topDailogStatus = true
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;

		.goodsContainers {
			background: #000000;
			margin-top: 32rpx;
			height: 160rpx;
			padding: 20rpx 32rpx;

			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_img {
					// width: 150rpx;
					height: 50rpx;
					font-size:40rpx;
					color:#fff;
					font-weight:700;
				}

				&_goodsIcon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 114rpx;
					height: 48rpx;
					border: 1px solid #fff;
					border-radius: 48rpx;

					&_text {
						color: #fff;
						font-size: 24rpx;
						line-height: 32rpx;
					}

					&_img {
						width: 28rpx;
						height: 28rpx;
						margin-left: 6rpx;

						&_Icon {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			&_bottom {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #fff;
				line-height: 40rpx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}

		}

		.scrollImg_item {
			padding-left: 32rpx;

			&_title {
				margin-top: 32rpx;
				margin-bottom: 8rpx;
				font-weight: 700;

				&_text {
					color: rgba(0, 0, 0, 1);
					font-size: 48rpx;
				}

				&_text1 {
					margin-left: 10rpx;
					color: rgba(0, 0, 0, 1);
					font-size: 32rpx;
				}
                &_text2{
					margin-left: 6rpx;
					font-size: 32rpx;
				}
				&_text1.active0 {
					color: rgba(53, 112, 65, 1);
				}

				&_text1.active1 {
					color: rgba(27, 28, 128, 1);
				}

				&_text1.active2 {
					color: rgba(234, 11, 42, 1);
				}
			}

			&_line {
				width: 218rpx;
				height: 4rpx;
			}

			&_line.active0 {
				background: rgba(53, 112, 65, 1);
			}

			&_line.active1 {
				background: rgba(27, 28, 128, 1);
			}

			&_line.active2 {
				background: rgba(234, 11, 42, 1);
			}

			&_view {
				margin-top: 16rpx;
			}
		}

		.bannerContainers {
			margin-top: 32rpx;
			// height: 444rpx;
			margin-bottom: 24rpx;
			overflow-x:hidden;
		}

		.newsContainers {
			margin-top: 48rpx;
			overflow: hidden;
		}

		.playlistContainers {
			width: 100%;
			background-image: url("../../static/bg_middle.png");
			background-size: 100% 100%;

			&_title {
				padding: 32rpx;
				padding-bottom: 0rpx;
				font-weight: 700;
				font-size: 48rpx;
				line-height: 60rpx;
			}
		}
	}
</style>